<script setup lang="ts">
import type {Component} from "vue";
import {IconHome, IconUser, IconSettings} from "@arco-design/web-vue/es/icon";
import F_component from "@/components/common/f_component.vue";
import {ref} from "vue";
import {collapsed} from "@/components/admin/f_menu";
import router from "@/router";
import {useRoute} from "vue-router";
import {watch} from "vue";
import {userStorei} from "@/stores/user_store";
import F_menu_item from "@/components/admin/f_menu_item.vue";

const store = userStorei()
const route = useRoute()

interface MenuType {
  title: string
  name: string
  icon?: string | Component
  children?: MenuType[]
  role?: number
}


const menuList: MenuType[] = [
  {title: "首页", name: "home", icon: IconHome},
  {
    title: "个人中心", name: "userCenter", icon: IconUser, children: [
      {title: "个人信息", name: "userInfo", icon: "iconfont icon-gerenxinxi_o"},
      {title: "登录列表", name: "userLoginList", icon: "iconfont icon-denglujilu"},
      {title: "积分充值", name: "scopeRecharge", icon: "iconfont icon-chongzhi"}
    ]
  },
  {
    title: "用户管理", role: 1, name: "userManage", icon: "iconfont icon-yonghuguanli", children: [
      {title: "用户列表", name: "userList", icon: "iconfont icon-yonghuliebiao",},
      {title: "订单列表", name: "orderList", icon: "iconfont icon-dingdanliebiao",},
      {title: "登录列表", name: "userAdminLoginList", icon: "iconfont icon-denglujilu",},
    ]
  },
  {
    title: "AI管理", name: "aiManage", icon: "iconfont icon-yonghuguanli", children: [
      {title: "角色列表", role: 1, name: "roleList", icon: "iconfont icon-sn-gwgl-swpsbgs",},
      {title: "工单列表", role: 1, name: "roleOrderList", icon: "iconfont icon-huizhenjilu",},
      {title: "会话列表", role: 1, name: "sessionList", icon: "iconfont icon-huihualiebiao",},
      {title: "我的角色", name: "myRoleList", icon: "iconfont icon-aishezhi",},
      {title: "我的工单", name: "myRoleOrderList", icon: "iconfont icon-gongdanqueren",},
      {title: "我的会话", name: "mySessionList", icon: "iconfont icon-yuetan",},
      {title: "我的订单", name: "myOrderList", icon: "iconfont icon-biiconcopy-",},
    ]
  },
  {
    title: "系统设置", role: 1, name: "settingsManage", icon: "iconfont icon-xitong", children: [
      {title: "日志列表", name: "logList", icon: "iconfont icon-rizhi",},
      {title: "图片管理", name: "imageList", icon: "iconfont icon-tupian",},
      {
        title: "站点设置", name: "settings", icon: "iconfont icon-wangzhanpeizhiguanli", children: [
          {title: "网站设置", name: "site_info", icon: "iconfont icon-wangzhanshezhi",},
          {title: "AI设置", name: "ai", icon: "iconfont icon-aishezhi",},
          {title: "微信登陆", name: "wx_login", icon: "iconfont icon-weixindenglu",},
          {title: "阿里支付", name: "wx_pay", icon: "iconfont icon-weixinzhifu",},
          {title: "邮箱设置", name: "email", icon: "iconfont icon-youxiang",},
          {title: "OCR设置", name: "ocr", icon: "iconfont icon-OCRshibieguanli",},
        ]
      },
    ]
  },
]


function menuItemClick(key: string) {
  router.push({
    name: key
  })
}

const openKeys = ref<string[]>([])
const selectedKeys = ref<string[]>([])

function initRoute() {
  if (route.matched.length >= 3) {
    // 展开它的从第一级到最后的前一级
    const lis = []
    for (let i = 0; i < route.matched.length; i++) {
      if (i == 0 || i == route.matched.length - 1) {
        continue
      }
      lis.push(route.matched[i].name)
    }
    openKeys.value = lis as string[]
  }
  console.log(route.matched)

  selectedKeys.value = [route.name as string]
}

watch(() => route.name, () => {
  initRoute()
}, {immediate: true})


</script>

<template>
  <div class="f_menu" :class="{collapsed: collapsed}">
    <div class="f_menu_inner scrollbar">
      <a-menu
          @menu-item-click="menuItemClick"
          v-model:collapsed="collapsed"
          v-model:open-keys="openKeys"
          v-model:selected-keys="selectedKeys"
          show-collapse-button>
        <f_menu_item :list="menuList"></f_menu_item>
      </a-menu>
    </div>

  </div>
</template>

<style lang="less">
.f_menu {
  height: calc(100vh - 90px);
  position: relative;

  &.collapsed {
    .arco-menu-collapse-button {
      left: 48px !important;
    }
  }

  &:hover {
    .arco-menu-collapse-button {
      opacity: 1 !important;
    }
  }

  .f_menu_inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .arco-menu {
      position: inherit;

      .arco-menu-collapse-button {
        top: 50%;
        transform: translate(-50%, -50%);
        left: 240px;
        transition: all .3s;
        opacity: 0;
      }
    }
  }
}
</style>